<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="contestPath" value="<%=request.getContextPath()%>"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<title>考题列表</title>
		<style>
			.testTypeScore {
				font-weight: bold;
			}
			#addTestFrom input[type="text"], #addTestFrom textarea {
				width: 380px;
			}
			#testListTable .content {
				width: 150px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			#testListTable .choose {
				width: 100px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.modal-body span{
				max-width: 580px;
				word-wrap: break-word;
			}
			.modal-body label {
				width: 100px;
				text-align: right;
				margin: 0 10px 0 10px;
			}
		</style>
		<script type="text/javascript">
				$(function(){

					$('.show-test').click(function(){
						var testId = $(this).parent().siblings().eq(2).text();
						$.ajax({
							type: "POST",
							url: "${contestPath}/teacher/getTestById",
							data: {
								testId: testId
							},
							dataType: "json",
							success: function(data){
								$('#showTestModal .sub-name').text(data.subName);
								$('#showTestModal .content').text(data.content);
								$('#showTestModal .test-type').text(data.examTestType.testType);
								$('#showTestModal .test-type-score').text(data.examTestType.testTypeScore);
								$('#showTestModal .choose-a').text(data.chooseA);
								$('#showTestModal .choose-b').text(data.chooseB);
								$('#showTestModal .choose-c').text(data.chooseC);
								$('#showTestModal .choose-d').text(data.chooseD);
								$('#showTestModal .answer').text(data.answer);
							}
						});
						$('#showTestModal').modal('show');
					});
					
					$("#addTestBtn").click(function(){
						$.ajax({
							type: "POST",
				            dataType: "json",
				            url: "${contestPath}/teacher/getSubjectAndTypes",
				            data: {},
							success: function(data){
								$('#addTestFrom select[name="subId"]').empty();
								$('#addTestFrom select[name="testType"]').empty();
		
								$.each(data.subjectList, function(index, item){
									$('#addTestFrom select[name="subId"]').append('<option value="' + item.subId + '">' + item.name + '</option>');
								});
								$.each(data.testTypeList, function(index, item){
									$('#addTestFrom select[name="testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '">' + item.testType + '</option>');
								});
								$('#addTestFrom select[name="testType"]').trigger('change');
							}
						});
						$('#addTestModal').modal('show');
					});

					$('#addTestFrom select[name="testType"]').change(function(){
						$('#addTestFrom .testTypeScore').text('本题每题' + $(this).find('option:checked').attr('score') + '分。')
						var testType = $(this).val();
		
						if(testType == 1){
							$('#addTestFrom .answerTotal input:radio').show();
							$('#addTestFrom .answerTotal input:checkbox').hide();
						}else if(testType == 2){
							$('#addTestFrom .answerTotal input:checkbox').show();
							$('#addTestFrom .answerTotal input:radio').hide();
						}else{
							alert('无此试题类型！');
						}
					});
					
					$('#addTestSaveBtn').click(function(){
						//if($('#addTestForm').valid()){
							var subId = $('#addTestFrom select[name="subId"]').val();
							var testType = $('#addTestFrom select[name="testType"]').val();
							var content = $('#addTestFrom textarea[name="content"]').val();
							var chooseA = $('#addTestFrom input[name="chooseA"]').val();
							var chooseB = $('#addTestFrom input[name="chooseB"]').val();
							var chooseC = $('#addTestFrom input[name="chooseC"]').val();
							var chooseD = $('#addTestFrom input[name="chooseD"]').val();
							var answerString = '';
							if(testType == 1){
								answerString += $('#addTestFrom input[name="answer"]:radio:checked').val();
							}else if(testType == 2){
								var array = $('#addTestFrom input[name="answer"]:checkbox:checked');
								$.each(array,function(index, item){
									answerString += (index == 0 ? $(item).val() : (',' + $(item).val()));
								});
							}else{
								alert('无此试题类型！');
							}
							$.ajax({
								type: 'POST',
								url: '${contestPath}/teacher/saveTest',
								data: {
									subId: subId,
									'examTestType.id': testType,
									content: content,
									chooseA: chooseA,
									chooseB: chooseB,
									chooseC: chooseC,
									chooseD: chooseD,
									answer: answerString
								},
								dataType: "json",
								success: function(data){
									if(data.success){
										alert('添加成功！');
										window.location.reload();
									}else{
										var messageMap = data.messageMap;
										for(var key in messageMap){
											var value = messageMap[key];
											$('#addTestFrom input[name="' + key + '"]').after('<label class"jsr303-message-label">' + value + '</label>');
										}
										alert('添加失败！' + messageMap['message']);
									}
								}
							});
						//}
					});
					
					$(".edit-test").click(function(){
						var testId = $(this).val();
						var subId;
						var testType;
						$.ajax({
							type: "POST",
							url: "${contestPath}/teacher/getTestById",
							data: {
								testId: testId
							},
							dataType: "json",
							success: function(data){
								subId = data.subId;
								testType = data.examTestType.id;
								$.ajax({
									type: "POST",
						            dataType: "json",
						            url: "${contestPath}/teacher/getSubjectAndTypes",
						            data1: {},
									success: function(data1){
										$('#editTestFrom select[name="subId"]').empty();
										$('#editTestFrom select[name="testType"]').empty();
										$.each(data1.subjectList, function(index, item){
											if(item.subId == subId){
												$('#editTestFrom select[name="subId"]').append('<option value="' + item.subId + '" selected = "selected">' + item.name + '</option>');
											}else{
												$('#editTestFrom select[name="subId"]').append('<option value="' + item.subId + '">' + item.name + '</option>');
											}
										});
										$.each(data1.testTypeList, function(index, item){
											if(item.id == testType){
												$('#editTestFrom select[name="testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '" selected = "selected">' + item.testType + '</option>');
											}else{
												$('#editTestFrom select[name="testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '">' + item.testType + '</option>');
											}
										});
										$('#editTestFrom select[name="testType"]').trigger('change');
									}
								});
								$('#editTestModal input[name="id"]').val(testId);
								$('#editTestModal textarea[name="content"]').val(data.content);
								$('#editTestModal input[name="chooseA"]').val(data.chooseA);
								$('#editTestModal input[name="chooseB"]').val(data.chooseB);
								$('#editTestModal input[name="chooseC"]').val(data.chooseC);
								$('#editTestModal input[name="chooseD"]').val(data.chooseD);
								if(data.examTestType.id == 1){
									$('#editTestFrom .answerTotal input:radio[value="'+ data.answer +'"]').attr('checked', true);
								}else if(data.examTestType.id == 2){
									$('#editTestFrom input[type="checkbox"]').removeAttr('checked');
									var array = data.answer.split(',');
									$.each(array, function(index, item){
										$('#editTestFrom input:checkbox[value = "' + item + '"]').prop('checked', true);
									});
								}else{
									alert('无此试题类型！');
								}
							}
						});
						
						$('#editTestModal').modal('show');
					});

					$('#editTestFrom select[name="testType"]').change(function(){
						$('#editTestFrom .testTypeScore').text('本题每题' + $(this).find('option:checked').attr('score') + '分。')
						var testType = $(this).val();
		
						if(testType == 1){
							$('#editTestFrom .answerTotal input:radio').show();
							$('#editTestFrom .answerTotal input:checkbox').hide();
						}else if(testType == 2){
							$('#editTestFrom .answerTotal input:checkbox').show();
							$('#editTestFrom .answerTotal input:radio').hide();
						}else{
							alert('无此试题类型！');
						}
					});

					$('#editTestUpdateBtn').click(function(){
						//if($('#addTestForm').valid()){
							var id = $('#editTestFrom input[name="id"]').val();
							var subId = $('#editTestFrom select[name="subId"]').val();
							var testType = $('#editTestFrom select[name="testType"]').val();
							var content = $('#editTestFrom textarea[name="content"]').val();
							var chooseA = $('#editTestFrom input[name="chooseA"]').val();
							var chooseB = $('#editTestFrom input[name="chooseB"]').val();
							var chooseC = $('#editTestFrom input[name="chooseC"]').val();
							var chooseD = $('#editTestFrom input[name="chooseD"]').val();
							var answerString = '';
							if(testType == 1){
								answerString += $('#editTestFrom input[name="answer"]:radio:checked').val();
							}else if(testType == 2){
								var array = $('#editTestFrom input[name="answer"]:checkbox:checked');
								$.each(array,function(index, item){
									answerString += (index == 0 ? $(item).val() : (',' + $(item).val()));
								});
							}else{
								alert('无此试题类型！');
							}
							$.ajax({
								type: 'POST',
								url: '${contestPath}/teacher/updateTest',
								data: {
									id: id,
									subId: subId,
									'examTestType.id': testType,
									content: content,
									chooseA: chooseA,
									chooseB: chooseB,
									chooseC: chooseC,
									chooseD: chooseD,
									answer: answerString
								},
								dataType: "json",
								success: function(data){
									if(data.success){
										alert('修改成功！');
										window.location.reload();
									}else{
										var messageMap = data.messageMap;
										for(var key in messageMap){
											var value = messageMap[key];
											$('#editTestFrom input[name="' + key + '"]').after('<label class"jsr303-message-label">' + value + '</label>');
										}
										alert('修改失败！' + messageMap['message']);
									}
								}
							});
						//}
					});
					
					$('.delete-test').click(function(){
						var testId = $(this).val();
						if(confirm("是否确认删除？")){
							$.ajax({
								type: 'POST',
								url: '${contestPath}/teacher/deleteTest',
								data: {
									testId: testId,
								},
								dataType: "json",
								success: function(data){
									if(data.success){
										alert('删除成功！');
										window.location.reload();
									}else{
										var messageMap = data.messageMap;
										for(var key in messageMap){
											var value = messageMap[key];
											$('#addTestFrom input[name="' + key + '"]').after('<label class"jsr303-message-label">' + value + '</label>');
										}
										alert('删除失败！' + messageMap['message']);
									}
								}
							});
						}else{
							return;
						}
					});
					
				});
				</script>
	</head>

	<body>
		<div id="messageDiv">
			<c:if test="${not empty message }">
				<script type="text/javascript">
					alert("${message}");
				</script>
			</c:if>
		</div>
		
		<div class="page-content-area">
			<div class="page-header">
				<a href="testChangeLocale?localeType=en_US"><button type="button" class="btn btn-xs btn-default"><spring:message code="page.test.index.english"/></button></a>
				<a href="testChangeLocale?localeType=zh_CN"><button type="button" class="btn btn-xs btn-default"><spring:message code="page.test.index.chinese"/></button></a>
			</div><!-- /.page-header -->
			
			<!-- 添加考题-模态框（Modal） -->
			<div class="modal fade" id="addTestModal" tabindex="-1" role="dialog" aria-labelledby="addTestModalLabel" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="addTestModalLabel"><spring:message code="test.add.message"/></h4>
			            </div>
			            <div class="modal-body">
			            	<form id="addTestFrom" method="post">
			            	<p><label><spring:message code="test.subject.message"/>:</label><select name="subId"></select></p>
			            	<p><label><spring:message code="test.topicType.message"/>:</label><select name="testType"></select><label class="testTypeScore"></label></p>
			            	<p><label><spring:message code="test.content.message"/>:</label><textarea name="content" rows="8" cols="50"></textarea></p>
			            	<p><label><spring:message code="test.chooseA.message"/>:</label><input type="text" name="chooseA" placeholder="填写候选答案内容，作为选项A。"></p>
			            	<p><label><spring:message code="test.chooseB.message"/>:</label><input type="text" name="chooseB" placeholder="填写候选答案内容，作为选项B。"></p>
			            	<p><label><spring:message code="test.chooseC.message"/>:</label><input type="text" name="chooseC" placeholder="填写候选答案内容，作为选项C。"></p>
			            	<p><label><spring:message code="test.chooseD.message"/>:</label><input type="text" name="chooseD" placeholder="填写候选答案内容，作为选项D。"></p>
			            	<p><label><spring:message code="test.answer.message"/>:&nbsp;&nbsp;</label>
			            		<span class="answerTotal">
			            			<input type="radio" name="answer" value="A" checked />
			            			<input type="checkbox" name="answer" value="A"><spring:message code="test.chooseA.message"/>
			            			<input type="radio" name="answer" value="B" />
			            			<input type="checkbox" name="answer" value="B"><spring:message code="test.chooseB.message"/>
			            			<input type="radio" name="answer" value="C" />
			            			<input type="checkbox" name="answer" value="C"><spring:message code="test.chooseC.message"/>
			            			<input type="radio" name="answer" value="D" />
			            			<input type="checkbox" name="answer" value="D"><spring:message code="test.chooseD.message"/>
			            		</span>
			            	</p>
			            	</form>
						</div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="test.close.message"/></button>
			                <button id="addTestSaveBtn" type="button" class="btn btn-primary"><spring:message code="test.preservation.message"/></button>
			            </div>
			        </div><!-- /.modal-content -->
			    </div><!-- /.modal -->
			</div>
			
			<!-- 修改考题-模态框（Modal） -->
			<div class="modal fade" id="editTestModal" tabindex="-1" role="dialog" aria-labelledby="editTestModalLabel" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="editTestModalLabel"><spring:message code="test.edit.message"/></h4>
			            </div>
			            <div class="modal-body">
			            	<form id="editTestFrom" method="post">
			            	<p><label><spring:message code="test.id.message"/>:</label><select name="subId"></select></p>
			            	<p><label><spring:message code="test.subject.message"/>:</label><select name="testType"></select><label class="testTypeScore"></label></p>
			            	<p><label><spring:message code="test.content.message"/>:</label><textarea name="content" rows="8" cols="50"></textarea></p>
			            	<p><label><spring:message code="test.chooseA.message"/>:</label><input type="text" name="chooseA"></p>
			            	<p><label><spring:message code="test.chooseB.message"/>:</label><input type="text" name="chooseB"></p>
			            	<p><label><spring:message code="test.chooseC.message"/>:</label><input type="text" name="chooseC"></p>
			            	<p><label><spring:message code="test.chooseD.message"/>:</label><input type="text" name="chooseD"></p>
			            	<p><label><spring:message code="test.answer.message"/>:&nbsp;&nbsp;</label>
			            		<span class="answerTotal">
			            			<input type="radio" name="answer" value="A" checked />
			            			<input type="checkbox" name="answer" value="A"><spring:message code="test.chooseA.message"/>
			            			<input type="radio" name="answer" value="B" />
			            			<input type="checkbox" name="answer" value="B"><spring:message code="test.chooseB.message"/>
			            			<input type="radio" name="answer" value="C" />
			            			<input type="checkbox" name="answer" value="C"><spring:message code="test.chooseC.message"/>
			            			<input type="radio" name="answer" value="D" />
			            			<input type="checkbox" name="answer" value="D"><spring:message code="test.chooseD.message"/>
			            		</span>
			            	</p>
			            	<p><input type="hidden" name="id" ></p>
			            	</form>
						</div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="test.close.message"/></button>
			                <button id="editTestUpdateBtn" type="button" class="btn btn-primary"><spring:message code="test.preservation.message"/></button>
			            </div>
			        </div><!-- /.modal-content -->
			    </div><!-- /.modal -->
			</div>
			
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">
							<table id="testListTable" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th width=50>
											<button id="addTestBtn" type="button" class="btn btn-xs btn-success">
			                                	<i class="ace-icon fa fa-plus bigger-120"></i>
			                                </button>
		                                </th>
										<th class="center">
											<label class="position-relative">
												<input type="checkbox" class="ace" />
												<span class="lbl"></span>
											</label>
										</th>
									    <th><spring:message code="test.id.message"/></th>
									    <th><spring:message code="test.subject.message"/></th>
									    <th><spring:message code="test.content.message"/></th>
									    <th><spring:message code="test.chooseA.message"/></th>
									    <th><spring:message code="test.chooseB.message"/></th>
									    <th><spring:message code="test.chooseC.message"/></th>
									    <th><spring:message code="test.chooseD.message"/></th>
									    <th><spring:message code="test.answer.message"/></th>
									    <th><spring:message code="test.topicType.message"/></th>
									    <th><spring:message code="test.topicScore.message"/></th>
									    <th><spring:message code="test.action.message"/></th>
                                         	</tr>
								</thead>

								<tbody>
                                         <c:forEach items="${page.dates }" var="test">
                                             <tr>
                                             		<td></td>
                                                     <td class="center">
                                                         <label class="position-relative">
                                                             <input type="checkbox" class="ace" />
                                                             <span class="lbl"></span>
                                                         </label>
                                                     </td>
                                                     <td>${test.id }</td>
                                                     <td>${test.subName }</td>
                                                     <td><div class="content">${test.content }</div></td>
                                                     <td><div class="choose">${test.chooseA }</div></td>
                                                     <td><div class="choose">${test.chooseB }</div></td>
                                                     <td><div class="choose">${test.chooseC }</div></td>
                                                     <td><div class="choose">${test.chooseD }</div></td>
                                                     <td>${test.answer }</td>
                                                     <td>${test.examTestType.testType }</td>
                                                     <td>${test.examTestType.testTypeScore }</td>
										<td>
											<button title="<spring:message code="test.show.message"/>" class="btn btn-xs btn-success show-test">
												<i class="ace-icon fa fa-comment bigger-130"></i>
											</button>
										
											<button title="<spring:message code="test.edit.message"/>" class="btn btn-xs btn-info edit-test" value="${test.id }">
												<i class="ace-icon fa fa-pencil bigger-120"></i>
											</button>

											<button title="<spring:message code="test.del.message"/>" class="btn btn-xs btn-danger delete-test" value="${test.id }">
												<i class="ace-icon fa fa-trash-o bigger-120"></i>
											</button>
										</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
							<div class="col-xs-12" style="text-align: center;">
							<jsp:include page="/WEB-INF/view/template/page.jsp">
								<jsp:param name="url" value="toManageTest"/>
								<jsp:param name="items" value="${page.totalSize}"/>
							</jsp:include>
							</div>
						</div><!-- /.span -->
					</div><!-- /.row -->

					<!-- 查看详细试题-模态框（Modal） -->
					<div class="modal fade" id="showTestModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					    <div class="modal-dialog">
					        <div class="modal-content">
					            <div class="modal-header">
					                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					                <h4 class="modal-title" id="showTestModalLabel"><spring:message code="test.show.message"/></h4>
					            </div>
					            <div class="modal-body">
					            	<label><spring:message code="test.subject.message"/>:&nbsp;&nbsp;</label><span class="sub-name"></span><br />
					            	<label><spring:message code="test.content.message"/>:&nbsp;&nbsp;</label><span class="content"></span>&nbsp;&nbsp;——&nbsp;&nbsp;(<span class="test-type"></span>,每题<span class="test-type-score"></span>分)<br />
					            	<label>A:&nbsp;&nbsp;</label><span class="choose-a"></span><br />
					            	<label>B:&nbsp;&nbsp;</label><span class="choose-b"></span><br />
					            	<label>C:&nbsp;&nbsp;</label><span class="choose-c"></span><br />
					            	<label>D:&nbsp;&nbsp;</label><span class="choose-d"></span><br />
					            	<label style="font-weight: bold;"><spring:message code="test.answer.message"/>:&nbsp;&nbsp;</label><span class="answer"  style="font-weight: bold;"></span><br />
								</div>
					            <div class="modal-footer">
					                <button type="button" class="btn btn-default" data-dismiss="modal"><spring:message code="test.close.message"/></button>
					            </div>
					        </div><!-- /.modal-content -->
					    </div><!-- /.modal -->
					</div>
					
					<div class="hr hr-18 dotted hr-double"></div>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content-area -->

	</body>
</html>
